<template>
	<el-breadcrumb  style="padding: 30px;">
	   <el-breadcrumb-item>首页</el-breadcrumb-item>
	   <el-breadcrumb-item>大屏状态管理</el-breadcrumb-item>
	   <el-breadcrumb-item>探索浏览记录</el-breadcrumb-item>
	</el-breadcrumb>
	<el-select v-model="selectData" placeholder="请选择">
		
		<el-option v-for="t in shoplist" :label="t.name" :value="t.llqsjs"></el-option>
		
	</el-select>
	<div class="map" style="height: 100vh;display: flex;align-items: center;">
		<div id="myChartChina" :style="{ width: '80%', height: '80%' }"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import chinaJson from "echarts/map/json/china.json";
	import dayjs from "dayjs";

	export default {
		name: "Echarts",
		data(){
			return {
				shoplist:[],
				llqsjs:"",
				data:[]
			}
		},

		async mounted() {
			await this.getshop()
			 await this.getData();
            
		},

		methods: {
			async getshop(){
			let data = await this.$http.post("/index.php/index/goodses/htismobileff");
			console.log(data)
			this.shoplist=data.data;
			this.selectData=data.data[0].llqsjs;
			},
			async init() {
                await this.getData();
				this.drawLine();
			},
              async getData(){
				let data =  await this.$http.post("/index.php/index/goods/vhistorylists",{llqsjs:this.selectData})
				this.data=data;
				this.drawLine();
			  },
			drawLine(datas) {
				var myChartContainer = document.getElementById("myChartChina"); //绑定div容器

				var resizeMyChartContainer = function() {
					myChartContainer.style.width = 100 + "%";

					myChartContainer.style.height = window.innerHeight * 0.7 + "px";
				};

				resizeMyChartContainer();

				var myChartChina = echarts.init(myChartContainer);
				var x=this.data.map(t=>t.name)
				var y=this.data.map(t=>t.clicknum)
				var name = this.shoplist.filter(t=>t.llqsjs==this.selectData).map(t=>t.name)
				console.log(x,y)
				var optionMap = {
					title: {
						text: name,

						left: 'center',

					},
					xAxis: {
						type: 'category',
						data: x
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: y,
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}]
				};
				myChartChina.setOption(optionMap);

				window.onresize = function() {
					resizeMyChartContainer();

					myChartChina.resize();
				};
			},
		},
	};
</script>

<style scoped>

</style>
